
<!DOCTYPE html>
<html>
<head>
<title>Blogger Comment Editor</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style>
/* Main Styler by Taufik Nurrohman - Please do not use this code without permission from the developer */
* {
  margin:0px 0px;
  padding:0px 0px;
}

@font-face {
  font-family:'Ubuntu';
  font-style:normal;
  font-weight:normal;
  src:local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}

html {
  overflow-y:scroll;
}

*:focus {
  outline:none;
}

body {
  background-color:#2f2f2f;
  text-align:center;
  line-height:1.5em;
  font:small 'Ubuntu','Trebuchet MS',Verdana,Arial,Sans-serif;
  color:#333;
}

a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

/* Komentar */
#comments {
  padding:20px 30px 30px;
  margin:70px auto 120px;
  color:white;
  text-align:left;
}

/* Manipulation + CSS Fallback */
#comments .note {
  display:block;
  padding:5px 10px;
  border:1px solid black;
  background-color:#222;
  background-image:-webkit-linear-gradient(top,#333,#222);
  background-image:-moz-linear-gradient(top,#333,#222);
  background-image:-ms-linear-gradient(top,#333,#222);
  background-image:-o-linear-gradient(top,#333,#222);
  background-image:linear-gradient(top,#333,#222);
  -webkit-box-shadow:0px 0px 0px 1px #555;
  -moz-box-shadow:0px 0px 0px 1px #555;
  box-shadow:0px 0px 0px 1px #555;
  color:#ccc;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  text-shadow:0px 1px 0px black;
}

#comments .note a,
#comments .note code {
  font-size:11px;
}

#comments img.incomment {
  display:block;
  margin:2px auto 0px;
}

#comments a,
#comments i[rel="anchor"] {
  color:#5687B8;
  font-style:normal;
}

#comments a.anchor {
  font-size:96%;
}

#comments pre,
#comments i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",Courier,monospace !important;
  padding:0.5em 0.5em 0.5em 1em;
  background-color:#002b36;
  border-left:4px solid #268bd2;
  position:relative;
  overflow:auto;
  white-space:pre;
  word-wrap:normal !important;
}

#comments code,
#comments i[rel="code"] {
  color:white;
  font:normal 12px Monaco,'Courier New',Monospace;
}

#comments code a {
  color:white;
}

#comments code a:hover {
  background:transparent;
}

#comments blockquote,
#comments b[rel="quote"] {
  display:block;
  font-weight:normal;
  position:relative;
  background-color:#5D73B5;
  color:white;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  text-shadow:0 1px 0 rgba(0,0,0,0.2);
  margin:.75em 0;
  padding:15px 20px;
}

#comments blockquote a,
#comments blockquote a:visited {
  color:#FFEAE5!important;
}

#comments blockquote:before,
#comments b[rel="quote"]:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  bottom:100%;
  right:15px;
  border-color:transparent transparent #5D73B5;
  border-style:solid;
  border-width:7px;
}

#comments iframe {
  width:320px;
  max-width:320px;
  height:224px;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  display:block;
  margin:10px auto 10px;
  border:4px solid #444;
}

.cm_wrap {
  clear:both;
  margin:0px auto 4px;
  width:700px;
  position:relative;
}

.cm_head {
  margin:0;
  width:58px;
  position:absolute;
  top:0px;
  left:0px;
}

.comments .avatar-image-container {
  margin:0px 0px 3px;
  vertical-align:middle;
  border:1px solid #3c3c3c;
  padding:4px;
  width:45px !important;
  height:45px !important;
  -webkit-box-shadow:0px 1px 2px black;
  -moz-box-shadow:0px 1px 2px black;
  box-shadow:0px 1px 2px black;
}

.comments .avatar-image-container .img {
  display:block;
  float:left;
  width:45px !important;
  height:45px !important;
  background:black url('http://www.trollvl.com/favicon.ico') no-repeat 50% 50%;
}

.comments .avatar-image-container .img:hover {
  opacity:0.7;
}

.cm_reply {}

.cm_reply a {
  display:block;
  width:auto;
  margin:0px 0px 1px -2px;
  text-decoration:none;
  padding:2px 7px 3px;
  text-transform:none;
  color:white !important;
  background-color:#527915;
  background-image:-webkit-linear-gradient(top,#64931C,#527915);
  background-image:-moz-linear-gradient(top,#64931C,#527915);
  background-image:-ms-linear-gradient(top,#64931C,#527915);
  background-image:-o-linear-gradient(top,#64931C,#527915);
  background-image:linear-gradient(top,#64931C,#527915);
  font:normal 10px Tahoma,Verdana,Arial,Sans-Serif;
  -webkit-box-shadow:0px 2px 2px black;
  -moz-box-shadow:0px 2px 2px black;
  box-shadow:0px 2px 2px black;
  -webkit-border-radius:3px 0px 0px 3px;
  -moz-border-radius:3px 0px 0px 3px;
  border-radius:3px 0px 0px 3px;
}

.cm_reply a:hover,
.cm_reply a:focus,
.cm_reply a.clicked {
  margin:0px 0px 1px -6px;
  padding:2px 10px 3px 7px;
}

.cm_reply a:focus,
.cm_reply a.clicked {
  background-color:#890586;
  background-image:-webkit-linear-gradient(top,#890586,#5F085D);
  background-image:-moz-linear-gradient(top,#890586,#5F085D);
  background-image:-ms-linear-gradient(top,#890586,#5F085D);
  background-image:-o-linear-gradient(top,#890586,#5F085D);
  background-image:linear-gradient(top,#890586,#5F085D);
}

.cm_reply a:active {
  background-image:-webkit-linear-gradient(bottom,#64931C,#527915);
  background-image:-moz-linear-gradient(bottom,#64931C,#527915);
  background-image:-ms-linear-gradient(bottom,#64931C,#527915);
  background-image:-o-linear-gradient(bottom,#64931C,#527915);
  background-image:linear-gradient(bottom,#64931C,#527915);
}

.cm_entry {
  margin-left:58px;
  padding:16px 16px 16px;
  border:1px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:0px 1px 2px black;
  -moz-box-shadow:0px 1px 2px black;
  box-shadow:0px 1px 2px black;
  overflow:hidden;
  position:relative;
}

.cm_entry div.komentar-spam {
  padding:5px 10px 10px;
  margin:2px 0px 0px;
  clear:both;
  border:1px solid #555;
  background-color:#444;
  word-wrap:break-word;
  cursor:text;
  line-height:1.4em;
  min-height:20px;
}

.cm_info {
  border:1px solid #555;
  background-color:#444;
  padding:5px 10px;
  margin:0px 0px 2px;
}

.cm_name {
  font-weight:bold;
  text-decoration:none;
  float:left;
}

.cm_date {
  font-size:10px;
  color:#999;
  text-decoration:none;
  float:right;
}

#editor {
  background-color:rgba(0,0,0,0.4);
  border-bottom:1px solid black;
  padding:10px 15px;
  height:30px;
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  left:100px;
  z-index:999;
}

#editor a {
  color:white;
  text-decoration:none;
}

#editor ul,
#editor li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#editor-mode ul {
  background-color:#333;
  overflow:hidden;
}

#editor-mode li {
  float:left;
}

#editor-mode li a,
#editor-mode li .anc {
  display:block;
  font:bold 12px/30px Arial,Sans-Serif;
  background-color:#333;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  background-image:linear-gradient(top,rgba(0,0,0,0.2),rgba(0,0,0,0));
  padding:0px 20px;
  margin:0px 2px 0px 0px;
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),inset 0px -1px 1px rgba(0,0,0,0.2),0px 1px 3px black;
  border:1px solid #111;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  position:relative;
}

#editor li .anc input {
  border:1px solid #333;
  padding:2px 5px;
  display:inline;
  margin:0px 0px;
  font:bold 12px Arial,Sans-Serif;
}

#editor-mode li a:hover,
#editor-mode li a.active {
  text-decoration:none;
  background-color:#900;
}

#editor-mode li .anc .tooltip {
  cursor:pointer;
  background-color:#F7E794;
  border:1px solid #DE8C31;
  position:absolute;
  top:100%;
  right:-50px;
  left:0px;
  z-index:999;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  color:black;
  padding:10px;
  line-height:normal;
  text-align:left;
  margin-top:20px;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  display:none;
}
#editor-mode li .anc .tooltip:before,
#editor-mode li .anc .tooltip:after {
  content:"";
  width:0px;
  height:0px;
  border:10px solid transparent;
  border-bottom-color:#DE8C31;
  position:absolute;
  top:-20px;
  left:20px;
}
#editor-mode li .anc .tooltip:after {
  border-bottom-color:#F7E794;
  border-width:8px;
  top:-16px;
  left:22px;
}
#editor-mode li .anc input:focus + .tooltip {
  display:none !important;
}

textarea#htmlsource {
  width:606px;
  display:block;
  margin:0px auto 0px;
  min-height:400px;
  border:1px solid #555;
  background-color:#111;
  font:normal 12px 'Courier New',Monospace;
  color:#aaa;
  cursor:text;
}

#tool {
  float:right;
}

#edit {
  width:100px;
  position:fixed !important;
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  z-index:999;
  margin:0px 0px;
  padding:0px 0px;
  background-color:#222;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  border-top:20px solid #333;
  border-right:2px solid #333;
}
#edit li {list-style:none;margin:0px 0px;padding:0px 0px;}
#edit a {
  display:block;
  text-align:right;
  font:bold 11px/20px Arial,Sans-Serif;
  text-decoration:none;
  color:white;
  background-color:#222;
  background-image:-webkit-linear-gradient(top,#333,#222);
  background-image:-moz-linear-gradient(top,#333,#222);
  background-image:-ms-linear-gradient(top,#333,#222);
  background-image:-o-linear-gradient(top,#333,#222);
  background-image:linear-gradient(top,#333,#222);
  padding:0px 15px;
}
#edit a:active {
  background-color:#000;
  background-image:-webkit-linear-gradient(top,#000,#333);
  background-image:-moz-linear-gradient(top,#000,#333);
  background-image:-ms-linear-gradient(top,#000,#333);
  background-image:-o-linear-gradient(top,#000,#333);
  background-image:linear-gradient(top,#000,#333);
}

.clear {
  clear:both;
}

.hidden {
  display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- script type="text/javascript" src="js/jquery-1.7.1.min.js"></script -->
<script type="text/javascript">
// Please do not use this code without permission from the developer
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(2(){9 c=$(\'#1S\'),4=$(\'#1Q\'),j=$(\'#1u\').S(),Y=$(\'#Y\'),C=$(\'#C\'),R=$(\'a.1x-d-16\'),17=$(\'#19\'),1b=$(\'#16-1A\');c.e(2(){1e();r($(d).O()=="Lấy P"){$(d).O("Lấy P")}18{$(d).O("1mạn 1v / Lấy P")}$(\'.1a\').1a();h q});1b.e(2(){9 a=1E("Làm lại?");r(a){4.u("");j.k("")}h q});C.1n(2(){9 a=$(\'U\',d).k()+" ";4.V(a);$(\'U\',d).k("");$(\'u,X\').B({Z:$(\'#11\').12().13},14);c.1j();h q});17.1T(2(){c.1k()}).1l(2(){c.1j()});R.e(2(){9 p=M("1q 19 1r 1s 1t 1W C:");r(p){j.k(p+" "+j.k());4.V(p+" ");$(\'u,X\').B({Z:$(\'#11\').12().13},14)}h q});2 x(a,b){$(a).e(2(){4.F(b);h q})}x(\'a.6\',\'<6>&1B;1C&1D;</6>&K;\');x(\'a.8\',\'<8>Tập 6 vào đây</8><5>\');x(\'a.f\',\'<5><f>Nội W f...</f><5>\');x(\'a.w\',\'<5><s 7="w">Nội W w...</s>\');$(\'a.1o\').e(2(){9 a=M("Tập 1p:");r(a)4.F(\'<a 7="z" D="\'+a+\'">[E]</a>&K;\');h q});$(\'a.Q\').e(2(){9 a=M("E Hì15 Ả15:");r(a)4.F(\'<5><G 7="I" J="\'+a+\'" /><5>\');h q});2 1e(){r(4.1y(\':1z\')){9 a=4.u().0(/<5>/g,"\\n").0(/>&K;/g,"> ").0(/<a 7=\\"z\\" D=\\"(.[^>]*)\\">(.[^>]*)<\\/a>/g,"<i 3=\\"z\\">$1<\\/i>").0(/<G 7=\\"I\\" J=\\"(.[^>]*)\\">/g,"<i 3=\\"Q\\">$1<\\/i>").0(/<6>(.[^>]*)<\\/6>/g,"<i 3=\\"6\\">$1<\\/i>").0(/<8>(.[^>]*)<\\/8>/g,"<i 3=\\"8\\">$1<\\/i>").0(/<f>(.[^>]*)<\\/f>/g,"<b 3=\\"1d\\">$1<\\/b>").0(/<s 7/g,"<A 3").0(/<\\/s>/g,"\\<\\/A>").0(/\\t/g,"    ").0(/<(1f|p)>/g,"").0(/<\\/(1f|p)>/g,"\\n");j.k(a)}18{9 b=j.k().0(/\\n/g,"<5>").0(/<i 3=\\"z\\">(.[^>]*)<\\/i>/g,"<a 7=\\"z\\" D=\\"$1\\">\\[E\\]<\\/a>").0(/<i 3=\\"Q\\">(.[^>]*)<\\/i><5>/g,"<G 7=\\"I\\" J=\\"$1\\" \\/><5>").0(/<i 3=\\"6\\">(.[^>]*)<\\/i>/g,"<6>$1<\\/6>").0(/<i 3=\\"8\\">(.[^>]*)<\\/i>/1F,"<8>$1<\\/8>").0(/<b 3=\\"1d\\">(.[^>]*)<\\/b>/g,"<f>$1<\\/f>").0(/<A 3=\\"w\\">(.[^>]*)<\\/A>/g,"<s 7=\\"w\\">$1<\\/s>").0(/\\t/g,"    ");4.u(b)}}4.1G("e",2(){$(d).u("").1H(\'1I\')});$(1J).1K(2(){$(\'#j-1L 1M .1N .1O\').1g(1P).B({1h:"1R",1i:10},1c).1g(1U).B({1h:"S",1i:1V},1c).e(2(){$(d).1w()})})});',62,121,'replace||function|rel|txtPreview|br|code|class|pre|var||||this|click|blockquote||return||editor|val||||||false|if|cite||html||note|insertCode||anchor|em|animate|balas|href|Link|append|img||incomment|src|nbsp||prompt||text|Code|image|anchorBalas|hide|Nh|input|prepend|dung|body|generate|scrollTop||main|offset|top|400|nh|comment|inputBalas|else|userID|toggle|clear|200|quote|switchEditor|div|delay|opacity|marginTop|fadeIn|fadeOut|blur|So|submit|link|URL|Masukkan|komentator|yang|ingin|htmlsource|Comment|remove|answer|is|visible|delete|lt|sampel|gt|confirm|gm|one|removeAttr|title|window|load|mode|li|anc|tooltip|1000|textPreview|show|render|focus|7000|40|Anda'.split('|'),0,{}))
</script>
</head>
<body spellcheck="false">
<div id="editor">
	<ul id="editor-mode">
     <li style="display:none;"><form action="#" class="anc" id="balas"><input type="text" id="userID" placeholder="Sisipkan userID"/><span class="tooltip" title="Dismiss">Jangan 
		lupa untuk menyisipkan userID jika Anda merancang komentar yang akan 
		Anda gunakan sebagai balasan dari komentar seseorang di blog.<br>Misal: <strong>
		@&lt;a href=&quot;#c2233&quot;&gt;Nama&lt;/a&gt;</strong></span></form></li>
		<li><a id="render" href="#main">Lấy code</a></li>
	</ul>
	<h2 style="position:absolute;top:12px;right:15px;font-weight:normal;color:#999;">
	Tạo và xem trước comment</h2>
</div>
<div id="comments" class="comments">
	<div class="cm_wrap" id="main">
		<div class="cm_head">
			<div class="cm_avatar">
				<div class="avatar-image-container vcard">
					<div class="img"></div>
				</div>
			</div>
			<div class="cm_reply">
           <a style="display:none;" class="answer-this-comment" href="#" target="_blank">
			Trả Lời</a>
				<a id="comment-delete" href="#" title="Reset Komentar">Viết Lại</a>
			</div>
		</div>

		<div class="cm_entry">
			<div class="cm_info">
				<div class="cm_name">
					<a href="#" rel="nofollow" target="_blank">Troll VL</a>
				</div>
				<div class="cm_date">
				18/7/13				</div>
				<div class="clear"></div>
			</div>
			<div title="Edit" id="textPreview" class="komentar-spam toggle" contenteditable="true">
				Công cụ này không dùng cho toàn bộ các comment của <b>
				Blogger</b>, mình xây dựng công cụ này để phục vụ riêng cho việc 
				soạn thảo comment dành cho blog TrollVL <a class="anchor" href="http://www.trollvl.com">
				[Link]</a><br><br>Chức năng của nó cũng tương tự như chế độ 
				Preview giúp bạn có thể xem trước nội dung và hình thức comment 
				của mình<br>
				Ngoài ra bạn cũng có thể chèn một số tính năng như quote, code, 
				hình ảnh mà mặc định của blogger không hỗ trợ. Ví dụ <code>
				&lt;taufik title=&quot;pelajar&quot; onblur=&quot;selebritis&quot; onfocus=&quot;super 
				hahay&quot;&gt;</code><br><br><pre> function commentToggle(selectTab) { 
      $(&amp;quot;.comments-tab&amp;quot;).addClass(&amp;quot;inactive-select-tab&amp;quot;); 
      $(selectTab).removeClass(&amp;quot;inactive-select-tab&amp;quot;); 
      $(&amp;quot;.comments-page&amp;quot;).hide(); 
      $(selectTab + &amp;quot;-page&amp;quot;).show(); 
    }</pre><br/><br/><cite class="note"><b>Lưu ý:</b> Tiện ích này chỉ áp dụng 
				cho comment của TrollVL, bạn không nên sử dụng các chức năng này 
				dành cho các blog khác - <i>18 July 2013</i></cite><br/><br/><img class="incomment" src="http://3.bp.blogspot.com/-WaeYZhXzm0A/UPL3FLOq-kI/AAAAAAAAJwk/NUQilSQCTSw/s45/LOGODONG.gif"><br/><br/><blockquote>
Buổi tối, bà vợ là sư tử hà đông nấu nướng xong liền ra lệnh cho con gọi điện 
cho bố về ăn cơm ngay. Thằng con sau một hồi hì hục gọi chạy ra bảo mẹ: - Mẹ ơi, 
con gọi ba lần liền mà lần nào cũng có một cô trả lời. Bà vợ điên quá, đợi đến 
lúc chồng đi làm về liền nhảy ra đấm đá túi bụi. Ông chồng bị bất ngờ không hiểu 
vì sao chỉ kịp nằm lăn ra kêu cứu. Hàng xóm thấy vậy sang xem rất đông. Thấy 
thế, bà vợ lúc này mặt vẫn đang hầm hầm liền bảo thằng con: - Mày quay ra nói 
cho các bác ấy nghe đi, cái con kia nó trả lời máy của bố mày thế nào? - Dạ, cô 
ấy bảo “Số máy quý khách vừa gọi hiện không liên lạc được, xin quý khách gọi lại 
sau…”</blockquote></div>
			<textarea spellcheck="false" id="htmlsource" contenteditable="true" class="toggle hidden"></textarea>
		</div>
	</div>

</div>

<ul id="edit">
	<li><a href="#" title="Chèn link" class="icon link">&lt;a&gt;</a></li>
	<li><a href="#" title="Chèn hình ảnh" class="icon image">&lt;img&gt;</a></li>
	<li><a href="#" title="Chèn code" class="icon pre">&lt;pre&gt;</a></li>
	<li><a href="#" title="Chèn blockquote" class="icon blockquote">&lt;blockquote&gt;</a></li>
	<li><a href="#" title="Chèn note" class="icon note">[note]</a></li>
</ul>

</body>
</html>